<template>
  <div class="Seatdetails">
    <h1>座位列表</h1>
    <div>
      <span>自习室总座位:{{ toTal }}</span>
      <span>当前使用:{{ use }}</span>
      <span>当前空闲:{{ idle }}</span>
    </div>
    <div class="inquire">
      <el-select v-model="value" clearable placeholder="全部">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="value1" clearable placeholder="全部">
        <el-option
          v-for="item in options1"
          :key="item.value1"
          :label="item.label1"
          :value="item.value1"
        />
      </el-select>
      <button @click="inQuire()">查询</button>
    </div>
    <div class="tab">
      <el-table
        ref="multipleTable"
        :data="
          aw.length > 0
            ? aw.slice((currentPage - 1) * pageSize, currentPage * pageSize)
            : tableData.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
        "
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="60"> </el-table-column>
        <el-table-column prop="seat_type" label="区域" width="150">
        </el-table-column>
        <el-table-column prop="seat_id" label="桌子号码" width="150">
        </el-table-column>
        <el-table-column prop="seat_state " label="状态" width="200">
          <template v-slot="scope">
            <span
              :style="{
                color: scope.row.seat_state == '空闲' ? 'red' : '#67c23a',
              }"
            >
              {{ scope.row.seat_state }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="seat_money" label="价格" width="200">
        </el-table-column>
        <el-table-column
          prop="seat_power==0 ? '关闭' : '开启'"
          label="当前电源状态"
          width="200"
        >
          <template v-slot="scope">
            <span
              :style="{
                color: scope.row.seat_power == 0 ? 'red' : '#67c23a',
              }"
            >
              {{ scope.row.seat_power == 0 ? "关闭" : "开启" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="电源控制">
          <template v-slot="scope">
            <el-button
              :type="scope.row.seat_power == 0 ? 'success' : 'danger'"
              text
              size="small"
              @click="gaibian(scope.row.seat_power, scope.row.seat_id)"
            >
              {{ scope.row.seat_power == 0 ? "点击开启" : "点击关闭" }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="but1">
      <button type="danger" @click="Close()">批量关灯</button>
      <button type="success" @click="Open()">批量开灯</button>
    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[2, 5, 10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.aw.length || tableData.length"
      />
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      options: [
        {
          value: "单人明区",
          label: "单人明区",
        },
        {
          value: "单人暗区",
          label: "单人暗区",
        },
        {
          value: "双人(靠窗）",
          label: "双人(靠窗）",
        },
        {
          value: "双人(室内)",
          label: "双人(室内)",
        },
      ],
      options1: [
        {
          value1: "空闲",
          label1: "空闲",
        },
        {
          value1: "已使用",
          label1: "已使用",
        },
      ],
      value: "",
      aw: [],
      value1: "",
      formInline: {
        user: "",
        region: "",
      },
      pageSize: 2,
      currentPage: 1,
      tableData: [],
      multipleSelection: [],
      aa: [],
    };
  },
  computed: {},
  //
  mounted() {
    axios({
      type: "get",
      url: "http://localhost:3010/seatdetails",
      success: function (res) {
        console.log(res);
      },
    })
      .then((res) => {
        console.log(res.data.data);
        console.log((this.tableData = res.data.data));
        this.tableData.map((item) => {
          if (item.seat_type == 1) {
            return (item.seat_type = "单人(明区)");
          } else if (item.seat_type == 2) {
            return (item.seat_type = "单人(暗区)");
          } else if (item.seat_type == 3) {
            return (item.seat_type = "双人(靠窗)");
          } else if (item.seat_type == 4) {
            return (item.seat_type = "双人(室内)");
          }
        });
      })

      .catch((error) => console.log(error));
    //
  },
  methods: {
    // 查询
    inQuire() {
      console.log(this.value);
      console.log(this.value1);
      this.aw = this.tableData.filter((item) => {
        if (this.value === "" || this.value1 === "") {
          return (
            item.seat_type === this.value || item.seat_state === this.value1
          );
        } else {
          return (
            item.seat_type === this.value && item.seat_state === this.value1
          );
        }
      });
      console.log(this.aw);
    },

    handleSelectionChange(val) {
      this.aa = [];
      console.log(val);
      this.multipleSelection = val;
      this.multipleSelection = this.multipleSelection.filter((item) => {
        return this.aa.push(item.seat_id);
      });
      console.log(this.aa);
    },
    //点击关灯
    Close() {
      let de = [];
      console.log(Object.keys(this.aa));
      for (let x in this.aa) {
        de.push(this.aa[x]);
      }
      console.log(de);
      axios({
        url: "http://localhost:3010/updateSeat",
        method: "post",
        data: {
          seat_power: 0,
          seat_id: de,
        },
      })
        .then(() => {
          axios({
            type: "get",
            url: "http://localhost:3010/seatdetails",
          })
            .then((res) => {
              console.log(res.data.data);
              console.log((this.tableData = res.data.data));
            })

            .catch((error) => console.log(error));
        })
        .catch((error) => console.log(error));
    },
    //点击开灯
    Open() {
      let de = [];
      console.log(Object.keys(this.aa));
      for (let x in this.aa) {
        de.push(this.aa[x]);
      }
      console.log(de);
      axios({
        url: "http://localhost:3010/updateSeat",
        method: "post",
        data: {
          seat_power: 1,
          seat_id: de,
        },
      })
        .then(() => {
          axios({
            type: "get",
            url: "http://localhost:3010/seatdetails",
          })
            .then((res) => {
              console.log(res.data.data);
              console.log((this.tableData = res.data.data));
            })

            .catch((error) => console.log(error));
        })
        .catch((error) => console.log(error));
    },
    // ---------------------修改电源状态
    gaibian(seat_power, seat_id) {
      console.log(seat_power, seat_id);
      seat_power == 0 ? (seat_power = 1) : (seat_power = 0);
      axios({
        url: "http://localhost:3010/updateSeat",
        method: "post",
        data: {
          seat_power,
          seat_id,
        },
      })
        .then(() => {
          axios({
            type: "get",
            url: "http://localhost:3010/seatdetails",
          })
            .then((res) => {
              console.log(res.data.data);
              console.log((this.tableData = res.data.data));
            })

            .catch((error) => console.log(error));
        })
        .catch((error) => console.log(error));
    },
  },

  computed: {
    //----------------- 计算
    //  计算座位总数
    toTal: function () {
      return this.tableData.length;
    },
    // 当前使用
    use: function () {
      let aa = [];
      aa = this.tableData.filter((item) => {
        return item.seat_state == "使用中";
      });
      console.log(aa.length);
      return aa.length;
    },
    // 当前空闲
    idle: function () {
      let aa = [];
      aa = this.tableData.filter((item) => {
        return item.seat_state == "空闲";
      });
      console.log(aa.length);
      return aa.length;
    },
  },
};
</script>

<style scoped>
.Seatdetails {
  width: 100%;
  height: auto;
}
span {
  margin-right: 40px;
}
.inquire {
  width: 100%;
  height: 60px;
  margin-top: 20px;
  line-height: 60px;
  padding-left: 20px;
  background-color: #d7d7d7;
}
.inquire .el-select {
  margin-right: 100px;
  width: 15%;
}
.inquire button {
  width: 100px;
  height: 30px;
  float: right;
  margin-right: 20px;
  margin-top: 15px;
  background-color: #555555;
  border: none;
  outline: none;
  color: #ffff;
}
.inquire button:hover {
  background-color: #7b7b7b;
}
.tab {
  margin-top: 20px;
}
/* 改变字体颜色 */
.stateRed,
.powerRed {
  color: red;
}
.stateGreen,
.powerGreen {
  color: #42b783;
}
/*  */
.but1 {
  float: left;
  margin-top: 20px;
}
.but1 button:first-child {
  background-color: #d9001b;
  border: none;
  outline: none;
  width: 100px;
  height: 40px;
  margin-right: 20px;
  border-radius: 5px;
}
.but1 button:last-child {
  background-color: #6fb403;
  border: none;
  outline: none;
  width: 100px;
  height: 40px;
  border-radius: 5px;
}
.block {
  float: right;
  margin-top: 20px;
  margin-right: 400px;
}
.but1 button:last-child:hover {
  background-color: #ff5151;
}
.but1 button:first-child:hover {
  background-color: #b7ff4a;
}
/* .el-.el-table td.el-table__cell-column:last-child {
  cursor: pointer;
} */
</style>

